<template>
  <el-sub-menu
    v-if="menu.children && menu.children.length"
    :index="menu.menuPath"
  >
    <template #title>
      <el-icon v-if="menu.icon">
        <app-icon :icon="menu.icon" />
      </el-icon>

      <span>{{ menu.name }}</span>
    </template>
    <MenuItem
      v-for="subMenu in menu.children"
      :key="subMenu.menuPath"
      :menu="subMenu"
    />
  </el-sub-menu>
  <el-menu-item
    v-else
    :index="menu.menuPath"
  >
    <el-icon v-if="menu.icon">
      <app-icon :icon="menu.icon" />
    </el-icon>
    <template #title>
      <span>{{ menu.name }}</span>
    </template>
  </el-menu-item>
</template>

<script setup>

const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
})
const menu = toRef(props, 'menu')

</script>

<style lang="scss" scoped>
</style>
